<template>
  <div class="container">
    <!-- 轮播图 -->
    <el-carousel>
      <el-carousel-item v-for="(item,index) in banners" :key="index">
        <div class="banner-image" v-bind:style="{background:`url(${item.url})`}"></div>
      </el-carousel-item>
    </el-carousel>
    <!-- 搜索框 -->
    <div class="banner-content">
        <div class="search-bar">
            <!-- tab栏 -->
            <el-row
            type="flex" 
            class="search-tab"
            >
                <span 
                v-for="(item, index) in options" 
                :key="index" 
                v-bind:class="{active: index === currentOption}"
                @click="handleOption(index)"
                >
                    <i>{{item.name}}</i>
                </span>
            </el-row>
            
            <!-- 输入框 -->
            <el-row 
            type="flex" 
            align="middle" 
            class="search-input">
                <input 
                :placeholder="options[currentOption].placeholder" 
                v-model="searchValue"
                @keyup.enter="handleSearch"/>
                <i class="el-icon-search" @click="handleSearch"></i>
            </el-row>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data(){
    return{
      banners:[],
      options: [        // 搜索框tab选项
        {
          name: "攻略", 
          placeholder: "搜索城市", 
          pageUrl: "/post?city="
        },
        {
          name: "酒店", 
          placeholder: "请输入城市搜索酒店", 
          pageUrl: "/hotel?city="
        },
        {
          name: "机票", 
          placeholder: "请输入出发地", 
          pageUrl: "/air"
        }
      ],
      searchValue: "",      // 搜索框的值
      currentOption: 0,    //   
    }
  },
  mounted(){
        //在js语言中调用参数和函数都必须加this
        this.getBanners()
    },
    methods:{
        getBanners(){
            //axios的使用
            this.$axios({
                url:'/scenics/banners'
            }).then(res=>{
                console.log("后端返回的图片为",res)
                this.banners = res.data.data
                for(let i=0;i<this.banners.length;i++){
                  this.banners[i].url=this.$axios.defaults.baseURL+this.banners[i].url
                }
            })
        },
        handleOption(index){
          this.currentOption=index
          let item=this.options[this.currentOption]
          if(item.name=="机票"){
            this.$router.push(item.pageUrl)
          }
        },
        handleSearch(){
          //获取用户搜索的对象
          let item=this.options[this.currentOption]
          //拼装出转跳地址并转跳
          let page=item.pageUrl+this.searchValue
          this.$router.push(page)
        },
    }
}
</script>

<style scoped lang="less">
.container{
    min-width:1000px;
    margin:0 auto;
    position:relative;

    /deep/ .el-carousel__container{
        height:700px;
    }

    .banner-image{
        width:100%;
        height:100%;
        background-size: contain contain;
    }
}

.banner-content{
        z-index:9;
        width:1000px;
        position:absolute;
        left:50%;
        top:45%;
        margin-left: -500px;
        border-top:1px transparent solid;

        .search-bar{
            width:552px;
            margin:0 auto;
        }

        .search-tab{
            .active{
                i{
                color:#333;
                }
                &::after{
                background: #eee;
                }
            }

            span{
                width:82px;
                height:36px;
                display:block;
                position: relative;
                margin-right:8px;
                cursor: pointer;

                i{
                position:absolute;
                z-index:2;
                display:block;
                width:100%;
                height:100%;
                line-height:30px;
                text-align:center;
                color:#fff;
                }

                &:after{
                position: absolute;
                left:0;
                top:0;
                display:block;
                content: "";
                width:100%;
                height:100%;
                border: 1px rgba(255,255,255,.2) solid;
                border-bottom: none;
                transform: scale(1.1,1.3) perspective(.7em) rotateX(2.2deg);
                transform-origin: bottom left;
                background: rgba(0,0,0,.5);
                border-radius:1px 2px 0 0;
                box-sizing:border-box;
                }
            }
        }
      }
      .search-bar{
            width:552px;
            margin:0 auto;
        }
        .search-tab{
            .active{
                i{
                color:#333;
                }
                &::after{
                background: #eee;
                }
            }

            span{
                width:82px;
                height:36px;
                display:block;
                position: relative;
                margin-right:8px;
                cursor: pointer;

                i{
                position:absolute;
                z-index:2;
                display: block;
                width:100%;
                height:100%;
                line-height:30px;
                text-align:center;
                color:#fff;
                }

                &:after{
                position: absolute;
                left:0;
                top:0;
                display:block;
                content: "";
                width:100%;
                height:100%;
                border: 1px rgba(255,255,255,.2) solid;
                border-bottom: none;
                transform: scale(1.1,1.3) perspective(.7em) rotateX(2.2deg);
                transform-origin: bottom left;
                background: rgba(0,0,0,.5);
                border-radius:1px 2px 0 0;
                box-sizing:border-box;
                }
            }
        }
        .search-input{
            width:550px;
            height:46px;
            background:#fff;
            border-radius: 0 4px 4px 4px;
            border: 1px rgba(255,255,255,.2) solid;
            border-top:none;
            box-sizing: unset;

            input{
                flex:1;
                height:20px;
                padding: 13px 15px;
                outline: none;
                border:0;
                font-size:16px;
            }

            .el-icon-search{
                cursor :pointer;
                font-size:22px;
                padding:0 10px;
                font-weight:bold;
            }
        }
</style>